<template>
  <div class="roster-container overview">
    <!-- 顶部区域 -->
    <div class="header flex">
      <div class="selecte-section flex">
        <div class="selecte-wrap flex">
          <img src="@/assets/images/partment.png" alt class="partment-icon" />
          <div class="selecte-title" @click="selectOrg">{{currentOrg}}</div>
          <Icon type="md-arrow-dropdown" class="dropdown" size="20" />
        </div>
        <Icon type="ios-calendar-outline" size="20" />
         <DatePicker type="daterange" placeholder="请选择" clearable 
         @on-clear="clearDate" @on-change="dateChange"
          class="ml12" style="width: 200px"></DatePicker>
         <Select
          v-model="employee_name"
          filterable
          remote
          :remote-method="searchByName"
          :loading="loading1"
          @on-change="addSelectName"
          style="width:200px"
          placeholder="姓名"
                    clearable
          @on-clear="clearName"
        >
          <Option
            v-for="(option, index) in orgOptions"
            :value="option.value"
            :key="index"
          >{{option.label}}</Option>
        </Select>
      </div>
      <div class="right flex">
        <Button type="success" class="add-btn" @click="openRightCard">添加打卡记录</Button>
        <!-- <Dropdown style="margin-left: 20px">
          <Button class="more-btn">
            更多功能
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem>导入历史考勤</DropdownItem>
          </DropdownMenu>
        </Dropdown>-->
      </div>
    </div>

    <!-- 出勤人数 -->
    <!-- <div class="work-number">
      <a href class="num active">出勤3人</a>
      <a href class="num">出勤3人</a>
      <a href class="num">出勤3人</a>
    </div>-->

    <!-- 表格区域 -->
    <div class="table-section">
      <div class="tab-header-info flex">
        <div class="header-info-lefe flex">
          <ColorBar />
        </div>
        <div class="header-info-right">
          <ul class="table-actions flex">
            <li class="table-action-item">
              刷新
              <Icon type="ios-refresh" size="18" />
            </li>
            <!-- <li class="table-action-item" @click="triggerTableTitle">选择表头</li>
            <li class="table-action-item">
              <Dropdown>
                <div>
                  按部门排序
                  <Icon type="ios-arrow-down"></Icon>
                </div>
                <DropdownMenu slot="list">
                  <DropdownItem>按岗位职级排序</DropdownItem>
                  <DropdownItem>按最早入职排序</DropdownItem>
                  <DropdownItem>按最近入职排序</DropdownItem>
                  <DropdownItem>工号升序</DropdownItem>
                  <DropdownItem>工号降序</DropdownItem>
                </DropdownMenu>
              </Dropdown>
            </li> -->
          </ul>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table-wrap">
        <Table width="100%" :columns="columns" :data="list" class="table5 mt32" :loading="tableLoading"></Table>
      </div>
    </div>

      <!-- modal -->
    <Modal v-model="selectModal" width="720" class="selecte-modal org-modal">
      <p slot="header" style="font-weight:bold;">选择部门</p>
      <div class="m-c-content flex-box">
        <div class="selecte-modal-left">
          <Tabs value="name1" name="tab2">
            <TabPane label="选择部门" tab="tab2" name="name1">
              <div class="tab-content">
                <!-- <Input search placeholder="搜索员工姓名" class="search-inp" /> -->
                <ul class="lately-group">
                  <li class="lately-item flex-box">
                    <label for>
                      <Checkbox @on-change="selectAll" v-model="all">
                        <div class="right-info flex-box">全选</div>
                      </Checkbox>
                    </label>
                  </li>
                  <li class="lately-item flex-box" v-for="(item,index) in orgList" :key="index">
                    <label for>
                      <Checkbox v-model="item.checked" @on-change="orgCheck">
                        <div class="right-info flex-box">
                          <Icon type="md-folder" size="30" color="#c0dffe" class="mr12" />
                          {{item.organization_name}}
                          <span>（{{item.employee_num}}人）</span>
                        </div>
                      </Checkbox>
                    </label>
                  </li>
                </ul>
              </div>
            </TabPane>
            <TabPane label="最近选择" tab="tab2" name="name2">
              <div class="tab-content-2"></div>
            </TabPane>
          </Tabs>
        </div>
        <div class="selecte-modal-right">
          <div class="s-r-header flex-box" v-if="orgNum">
            <div class="s-r-header-left flex-box">
              <div class="s-r-h-title mr12">已选：</div>
              <div class="s-r-h-detail">
                <span v-if="orgNum">部门{{orgNum}}个</span>
                <Icon
                  type="md-close-circle"
                  class="pointer"
                  size="14"
                  @click="changeAllStatus(false)"
                />
              </div>
            </div>
          </div>
          <div class="s-r-list">
            <div
              class="s-r-l-item"
              v-for="(item,index) in orgList"
              :key="index"
              v-if="item.checked"
            >
              <Icon type="md-folder" size="30" color="#c0dffe" class="mr12" />
              <div class="s-r-l-item-name">
                <span class="ellipse">{{item.organization_name}}</span>
              </div>
              <div class="close-right-icon">
                <Icon type="md-close" @click="delSelect(index,'org')" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <div class="m-c-footer flex">
          <div class="m-c-left">
            <!-- <span>没有找到想要的项目？ </span>
            <span class="ml12"><a href="">去添加项目</a></span>-->
          </div>
          <div class="m-c-right">
            <Button @click="cancelSelect" class="no-border-btn">取消</Button>
            <Button class="save-btn-green" @click="confirmSelect">确认</Button>
          </div>
        </div>
      </div>
    </Modal>

    <!-- modal -->

     <div class="mask none" :class="{block:rightCardCloseStatus}" @click="closeRightCard"></div>
    <div class="right-cart none" :class="{block:rightCardCloseStatus}">
      <div class="right-cart-top flex">
        <div class="right-cart-title">添加打卡记录</div>
        <Icon type="md-close" class="right-cart-close" size="24" @click="closeRightCard" />
      </div>
      <div class="right-cart-body">
        <Form :model="formItem" :label-width="110" ref="formValidate" :rules="ruleValidate">
          <div class="form-item-row2">
            <FormItem label="员工姓名" prop="employee_id">
              <Select
                v-model="formItem.employee_id"
                filterable
                remote
                :remote-method="searchByName"
                :loading="loading1"
                @on-change="addSelectName1"
                style="width:300px"
                placeholder="姓名"
              >
                <Option
                  v-for="(option, index) in nameOptions"
                  :value="option.value"
                  :key="index"
                >{{option.label}}</Option>
              </Select>
            </FormItem>
            <div class="error" v-if="nameError">请选择员工</div>
          </div>
          <div class="form-item-row form-item-row2 form-item-row-flex">
            <FormItem label="打卡时间" class="form-item2" required>
              <!-- <Poptip trigger="focus" title="Title" content="content"  placement="bottom">
                  <Input placeholder="Input focus" />
                  <div class="checkin-slot" slot="content">
                     <div class="slot-wrap flex">
                      <Input placeholder="" />
                      <Input placeholder="" />
                     </div>
                     <DatePicker type="date" placeholder="Select date" class="form-input"></DatePicker>
                  </div>
              </Poptip>-->
              <DatePicker type="date" 
              v-model="formItem.clock_in_date"
              format="yyyy-MM-dd"
              placeholder="选择日期" 
              @on-change="setDate"
              style="width: 150px"></DatePicker>
              <TimePicker
                type="time"
                format="HH:mm"
                confirm
                v-model="formItem.clock_in_hours"
                placeholder="选择时间"
                style="width: 150px"
              ></TimePicker>
            </FormItem>
            <div class="error" v-if="addError">请选择打卡日期和时间</div>
          </div>

          <div class="form-item-row">
            <FormItem label="备注">
              <Input
                v-model="formItem.remark"
                :rows="4"
                type="textarea"
                placeholder="备注"
                class="form-input"
              ></Input>
            </FormItem>
          </div>
        </Form>
      </div>
      <div class="right-cart-footer">
        <Button class="cancle-btn-border" @click="closeRightCard">取消</Button>
        <Button type="default" class="save-btn-green ml12" @click="saveAdd">保存并生效</Button>
      </div>
    </div>

    <!-- 快速编辑end -->

  </div>
</template>
<script>
import { attendance, personnel } from "@/apis";
import http from "@/utils/http";
export default {
  name: "list",
  data() {
    return {
       selectModal: false,
      orgList: [],
      orgNum: 0,
      all: false,
      currentOrg: "选择部门",
      employee_name: "", //筛选的name
      loading1: false,
      orgOptions: [],
      selectDate:"",

      nameOptions: [],//姓名模糊搜索
      confirmModal: true,
      columns: [
        {
          title: " ",
          key: "selection",
          type: "selection",
          width: "60"
        },
        {
          title: "姓名",
          key: "name"
        },
        {
          title: "工号",
          key: "age"
        },
        {
          title: "部门",
          key: "province"
        },
        {
          title: "岗位",
          key: "position"
        },
        {
          title: "上班日期",
          key: "clock_in_date",
          width: 150
        },
        {
          title: "班次",
          key: "city"
        },
        {
          title: "打卡时间",
          key: "clock_in_hours",
          width: 150
        },
        {
          title: "打卡来源",
          width: 150,
          key: "source"
        },
        {
          title: "打卡设备",
          key: "devices"
        },
        {
          title: "打卡地点",
          key: "clock_in_place"
        },
        {
          title: "备注",
          key: "remark"
        }
      ],
      formItem: {
        employee_id: "",
        clock_in_date: "",
        clock_in_hours: "",
        source: "HR手动补卡",
        devices: "PC",
        remark: ""
      },
      ruleValidate: {
        employee_id: [{ required: true, message: "姓名不能为空", trigger: "blur" }]
      },
      addError: false, //添加补卡记录错误显示
      nameError:false,//姓名校验
      openTableTitle: false,
      loading1:false,//姓名模糊搜索loading
      rightCardCloseStatus: false,
      list: [],
      tableLoading: false
    };
  },
  methods: {
    triggerTableTitle() {
      this.openTableTitle = true;
    },
    cancleTableTitle() {
      this.openTableTitle = false;
    },
    saveTableTitle() {
      this.openTableTitle = false;
    },
    closeRightCard() {
      this.rightCardCloseStatus = false;
    },
    openRightCard(a, b) {
      this.rightCardCloseStatus = true;
    },
    multiEditing() {
      if (!this.columns[0].type && this.columns[0].type !== "selection") {
        this.columns.unshift({
          title: " ",
          key: "selection",
          type: "selection",
          width: "60"
        });
      } else {
        this.columns.shift();
      }
    },

    getList() {
      this.tableLoading = true;
       let organization_id =[];
      this.orgList.forEach(e => {
        if (e.checked) {
          organization_id.push(e.organization_id);
        }
      });
      http.get(attendance.workattendancerecordlist, {
         params:{
          organization_id:organization_id.join(","),
          name:this.employee_name,
          start_date:this.selectDate[0]||"",
          end_date:this.selectDate[1]||"",
        }
      }).then(res => {
        let list = res.data.list.data;
        if (list.length) {
          list.forEach(e => {
            e = Object.assign(e, e.employee_info);
          });
        }
        this.list = list;
        this.tableLoading = false;
      });
    },

    // 添加打卡记录
    saveAdd() {
      let _this = this;
      let form = this.formItem;
      console.log(form);
       if(!form.employee_id){
         this.nameError = true;
         return 
       }
       if (!form.clock_in_date || !form.clock_in_hours) {
            this.addError = true;
          } else {
            _this.addError = false;
            http
              .post(attendance.workattendancerecordcreate, {
                data: {
                  ...form
                }
              })
              .then(res => {
                if (res.e == "9999") {
                  _this.$Message.success(res.m);
                  _this.closeRightCard();
                  _this.getList();
                } else {
                  _this.$Message.error(res.m);
                }
              });
          }
    },

    // 员工姓名模糊查询
    searchByName(query) {
     
      if (query !== "") {
        this.loading1 = true;
         let _this = this;
        http
          .get(personnel.employeelist, {
            params: {
              name: query
            }
          })
          .then(res => {
              let list = res.data.list.data || [];
              let temp = [];
              list.forEach(e=>{
                temp.push({
                  value:e.employee_id,
                  label:e.name
                })
              });
              _this.loading1 = false
              _this.nameOptions = temp;
          });
      }
    },
    addSelectName(a,b){
      console.log(a,b);
      // this.formItem.employee_id = a;
      this.nameError= false;
      console.log(this.formItem.employee_id);
    },
    addSelectName1(a,b){
     
      this.formItem.employee_id = a;
      this.nameError= false;
     
    },
    setDate(e){
      this.formItem.clock_in_date = e;
    },


    dateChange(e){
      console.log(e);
      this.selectDate = e;
      this.getList();
    },
    clearDate(e){
      this.selectDate = "";
      this.getList();
    },
    getOrg() {
      this.$getOrgList().then(res => {
        this.orgList = res.data.list || [];
      });
    },
    confirmSelect() {
      console.log(2222);
      let orgName = [];
      this.orgList.forEach(e => {
        if (e.checked) {
          orgName.push(e.organization_name);
        }
      });
      this.currentOrg = orgName.join(",") || "选择部门";
      this.selectModal = false;
      console.log(orgName);
      if (orgName.length) {
        this.getList(); //更新列表数据
      }
    },
    cancelSelect() {
      this.selectModal = false;
    },
    orgCheck(e, index) {
      //选择组织
      this.updateOrgNum();
    },
    changeAllStatus(type) {
      //清除或者全选
      this.orgList.forEach(e => {
        e.checked = type;
      });

      // 更新数据
      this.updateOrgNum();
      if (!type) {
        // this.orgNames = "";
        this.all = false;
      }
    },
    selectAll(e) {
      this.all = e;
      this.changeAllStatus(e);
    },
    updateOrgNum() {
      let num = 0;
      this.orgList.forEach(e => {
        if (e.checked) {
          num++;
        }
      });
      if (this.orgList.length == num) {
        this.all = true;
      } else {
        this.all = false;
      }
      this.orgNum = num;
    },
    selectOrg() {
      this.selectModal = true;
    },
    searchByName(query) {
      if (query !== "") {
        this.loading1 = true;
        let _this = this;
        http
          .get(personnel.employeelist, {
            params: {
              name: query
            }
          })
          .then(res => {
            
            let list = res.data.list.data || [];
            let temp = [];
            console.log(list);
            list.forEach(e => {
              temp.push({
                value: e.employee_id,
                label: e.name
              });
            });
            _this.loading1 = false;
            _this.nameOptions = temp;
          });
      }
    },

    addSelectName(a, b) {
      this.getList(); //更新筛选列表
    },
    clearName() {
      this.employee_name = "";
      this.getList();
    },
  },
  mounted() {
    this.getList();
    this.getOrg();
  }
};
</script>
<style lang="scss" scoped src="./index.scss"></style>